<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheets/public.css">
    <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
</head>
<body>
<div class="box round">
    <h1 class="h2">服务器列表</h1>
    <div>
        <div>
            <a class="logout" href="/logout">退出</a>
            <div class="collapse navbar-collapse">
                <ul class=" nav navbar-nav">
                    <li class="active purview"><a href="/getAllApp">应用列表</a></li>
                    <li class="purview"><a href="/getAppDetails">应用详细列表</a></li>
                </ul>
            </div>

            <h4 class="h4">线上服务器</h4>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>服务器名称</th>
                    <th>地址</th>
                    <th>配置</th>
                    <th>类型</th>
                    <th>状态</th>
                    <th>备注</th>
                    <th></th>
                    <th></th>
                    <th class="purview"><button class="add_online btn btn-info btn-sm" type="button">增加</button></th>
                </tr>
                </thead>
                <tbody id="body_data">
                </tbody>
            </table>

            <form class="createServerForm" action="/createServer" method="post">
                <table class="create_s" style="display: none">
                    <tr>
                        <td><input class="online_input" type="text" name="servername" value="" placeholder="服务器名称"></td>
                        <td><input class="online_input" type="text" name="ip" value="" placeholder="ip地址"></td>
                        <td><input class="online_input" type="text" name="config" value="" placeholder="配置"></td>
                        <td><input class="online_input" type="text" name="type" value="" placeholder="类型"></td>
                        <td><input class="online_input" type="text" name="status" value="" placeholder="状态"></td>
                        <td><input class="online_input" type="text" name="remark" value="" placeholder="备注"></td>
                        <td><input class="online_input" type="hidden" name="isonline" value="1"></td>
                        <td><input class="online_input" type="hidden" name="id" value=""></td>
                        <td><a href="javascript:void(0)" class="online_btn btn btn-default btn-sm" role="button" onclick="saveServer();">保存</a></td>
                    </tr>
                </table>
            </form>
        </div>

        <div>
            <h4 class="h4">线下服务器</h4>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>服务器名称</th>
                    <th>地址</th>
                    <th>配置</th>
                    <th>类型</th>
                    <th>状态</th>
                    <th>备注</th>
                    <th></th>
                    <th></th>
                    <th class="purview"><button class="add_bellow btn btn-info btn-sm" type="button">增加</button></th>
                </tr>
                </thead>
                <tbody>
                <%
                var data =JSON.parse(bellowdata);
                if(data!=null){
                data.forEach(function(val,index){
                %>

                <tr>
                    <td><%=index + 1%></td>
                    <td style="display: none"><%=val.id%></td>
                    <td><%=val.server_name%></td>
                    <td><%=val.ip_address%></td>
                    <td><%=val.configuration%></td>
                    <td><%=val.server_type%></td>
                    <td><%=val.status%></td>
                    <td><%=val.remark%></td>
                    <td style="display: none"><%=val.isonline%></td>
                    <td class='edittd purview' onclick='getAlltd(this);'>编辑</td>
                    <td><a href="/toAppList?id=<%=val.id%>&servername=<%=val.server_name%>" >查看</a></td>
                    <td class="purview"><a href="/deleteServer?id=<%=val.id%>">删除</a></td>
                </tr>
                <% });}%>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="javascripts/jquery-1.7.1.min.js"></script>
<script src="javascripts/bootstrap.min.js"></script>

<script type="text/javascript">
    $(function(){
        var user = '<%=user%>';
        $.ajax({
            type: "GET",
            async:false,
            url: "/getServerList",
            dataType:'json',
            success: function(msg){
                for(var i=0;i<msg.length;i++){
                    for(var key in msg[i]){
                        if(msg[i][key]==null){
                            msg[i][key]="";
                        }
                    }
                    var tr = "<tr>"+
                            "<td>"+ (i+1) +"</td>"+
                            "<td style='display: none'>"+msg[i].id +"</td>"+
                            "<td>"+msg[i].server_name+"</td>"+
                            "<td>"+msg[i].ip_address+"</td>"+
                            "<td>"+msg[i].configuration+"</td>"+
                            "<td>"+msg[i].server_type+"</td>"+
                            "<td>"+msg[i].status+"</td>"+
                            "<td>"+msg[i].remark+"</td>"+
                            "<td style='display: none'>" +msg[i].isonline + "</td>"+
                            "<td class='edittd purview' onclick='getAlltd(this);'>编辑</td>"+
                            "<td><a href='/toAppList?id="+msg[i].id+"&servername="+msg[i].server_name+"'>查看</a></td>"+
                            "<td class='purview'><a href='/deleteServer?id="+msg[i].id+"'>删除</a></td>"+
                            "</tr>";
                    $("#body_data").append(tr);
                }
            }
        });

        if(user != 'sa'){
            $('.purview').remove();
        }

        $('.add_online').click(function(){
            $('.createServerForm').eq(0)[0].reset();
            $("input[name=isonline]").val(1);
            $('.create_s').show();
        });

        $('.add_bellow').click(function(){
            $('.createServerForm').eq(0)[0].reset();
            $("input[name=isonline]").val(0);
            $('.create_s').show();
        });

    });

    function saveServer(){
        var servername = $("input[name=servername]").val();
        var ip = $("input[name=ip]").val();
        var config = $("input[name=config]").val();
        var type = $("input[name=type]").val();
        var status = $("input[name=status]").val();
        var remark = $("input[name=remark]").val();

        if(servername!=""&&ip!=""&&config!=""&&type!=""&&status!=""&&remark!=""){
            $('.createServerForm').submit();
        }else{
            alert('有未填的选项');
            return false;
        }
    }

    function getAlltd(td){
        var tdArray = new Array();
        var tdval = $(td).prevAll('td');

        tdval.each(function( i,val){
            var td = ($(val).html());
            tdArray.push(td);
        });

        $('.createServerForm').attr('action','/editServer');
        $("input[name=id]").val(tdArray[7]);
        $("input[name=servername]").val(tdArray[6]);
        $("input[name=ip]").val(tdArray[5]);
        $("input[name=config]").val(tdArray[4]);
        $("input[name=type]").val(tdArray[3]);
        $("input[name=status]").val(tdArray[2]);
        $("input[name=remark]").val(tdArray[1]);
        $("input[name=isonline]").val(tdArray[0]);
        $('.create_s').show();
    }

</script>

</body>
</html>